<template>
	<view>
		<view class="details_img_box">
			<!-- <image src="../../components/www/static/img/addricon.png" mode=""></image> -->
			<view class="my_sw">
				<view class="uni-padding-wrap">
					<view class="page-section swiper">
						<view class="page-section-spacing">
							<swiper :circular="true" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							 :duration="duration">
								<swiper-item v-for="item in carousel" :key="item.uid">
									<image style="width: 100%;height: 100%;" class="zhuan" :src="item.url"></image>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="detailsObj.buy == '1'" class="details_rob_box">
			<view class="rob_title">
				疯狂抢购
				<text class="rob_ing">
					抢购中
				</text>
			</view>
			<view class="rob_time">
				距结束:
				<uni-countdown :show-day="false" :hour="24" :minute="minute" :second="0" :reset="reset" @timeup="timeUp">
				</uni-countdown>
			</view>
		</view>
		<view class="details_name_box">
			<view class="name_title">
				{{detailsObj.name}}
			</view>
			<view class="name_int">
				{{detailsObj.bewrite}}
			</view>
			<view class="name_price">
				¥&nbsp;{{detailsObj.price}}
			</view>
			<view class="name_give">
				<view class="name_icon icon iconfont iconshijian">

				</view>
				最快1分钟送达
			</view>
		</view>
		<vip ref="child"></vip>
		
		<view class="specification_box">
			<view class="specification_title">
				<view class="specification_name">
					净含量
				</view>
				<view class="specification_data">
					{{detailsObj.weight}}
				</view>
			</view>
		</view>
		<view class="specification_box">
			<view class="specification_title">
				<view class="specification_name">
					保存条件
				</view>
				<view class="specification_data">
				{{detailsObj.conditions}}
				</view>
			</view>
		</view>
		<view class="specification_box">
			<view class="specification_title">
				<view class="specification_name">
					保质期
				</view>
				<view class="specification_data">
				{{detailsObj.shelf_life}}
				</view>
			</view>
		</view>
		<view class="cut_off">
			
		</view>
		<view class="propaganda_img" v-for="item in propaganda" :key="item.ui">
			<image class="img_con" :src="item.url" mode=""></image>
		</view>
		<view class="dow">
			我没底线
		</view>

	</view>
</template>

<script>
	import uniCountdown from '@/components/linnian-CountDown/uni-countdown.vue'
	import vip from '@/components/vip/vip.vue'
	export default {
		components: {
			uniCountdown,
			vip
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				minute: 0,
				reset: false,
				detailsObj: {},
				propaganda: [],
				carousel: []
			};
		},
		onLoad: function(option) {
			console.log("option", option)
			var _this = this;
			//商品详情
			this.https('h5/nottoken/searchGood', 'GET', {
					id: option.id
				}) //(请求地址,请求类型,数据)
				.then(res => {

					if (res.data.code == 0) {

						_this.carousel = JSON.parse(res.data.data.carousel)
						_this.propaganda = JSON.parse(res.data.data.propaganda)
						_this.detailsObj = res.data.data
						console.log("商品详情", _this.propaganda)

					}
				})
				.catch(err => {

				})
		}

	}
</script>

<style lang="scss">
	.dow{
		    width: 100%;
		    height: 100upx;
		    background: #f8f4f5;
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    justify-content: center;
		    line-height: 100upx;
		    color: #999;
	}
	.propaganda_img{
		width: 100%;
		height: 700upx;
		padding: 16upx;
		box-sizing: border-box;
		.img_con{
			width: 100%;
			height: 100%;
		}
	}
	.cut_off{
		height: 10upx;
		width: 100%;
		background-color: #f8f4f5;
	}
	.specification_box{
		    width: 100%;
		    height: 88upx;
		    border-top: 1px solid #ededed;
		    line-height: 88upx;
		    font-size: 24upx;
		    padding-left: 20upx;
		    box-sizing: border-box;
		    display: flex;
		    justify-content: space-between;
			.specification_title{
				display: flex;
				justify-content: space-between;
				width: 100%;
				.specification_name{
					width: 40%;
					}
				.specification_data{
						width: 60%;
					// margin-left: 160upx;
				}
			}
	}
	.details_name_box {
		padding-left: 36upx;

		.name_give {
			width: 100%;
			height: 38px;
			box-sizing: border-box;
			font-size: 22upx;
			color: #1e1e1e;
			display: flex;
			align-items: center;

			.name_icon {
				margin-right: 20upx;
				font-size: 26upx;
			}
		}

		.name_price {
			width: 100%;
			height: 70upx;
			font-size: 22upx;
			color: #878787;
			// padding-left: 20upx;
			box-sizing: border-box;
			line-height: 70upx;
			text-overflow: ellipsis;
			overflow: hidden;
			margin-bottom: 8upx;
			color: #f25d65;
			font-size: 32upx;
			margin-right: 12upx;
			// margin-left: 4upx;
			font-weight: 600;
			border-bottom: 1px solid #ccc;
		}

		.name_int {
			width: 100%;
			height: 44upx;
			font-size: 26upx;
			color: #878787;
			// padding-left: 20upx;
			box-sizing: border-box;
			line-height: 44upx;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.name_title {
			width: 100%;
			height: 48upx;
			font-size: 32upx;
			color: #151513;
			// padding-left: 20upx;
			box-sizing: border-box;
			line-height: 48upx;
			text-overflow: ellipsis;
			overflow: hidden;
			font-weight: 600;
		}
	}

	.details_rob_box {
		width: 100%;
		height: 88upx;
		display: flex;
		align-items: center;
		margin-bottom: 32upx;

		.rob_time {
			background: #feefe8;
			color: #f1627d;
			height: 100%;
			line-height: 88upx;
			padding-left: 16upx;
			box-sizing: border-box;
			width: 45%;
		}

		.rob_title {
			width: 55%;
			height: 44px;
			background: #f14143;
			padding-left: 11px;
			line-height: 44px;
			box-sizing: border-box;
			font-size: 15px;
			color: #fff;

			.rob_title_name {}

			.rob_ing {
				font-size: 12px;
				margin-left: 7px;
			}
		}
	}

	.details_img_box {
		width: 100%;
		height: 700upx;
		.my_sw{
			.swiper {
				height: 700upx;
			}
		}
		
	}
</style>
